<template>
	<view class="app column">
		<view v-for="(item, index) in list" :key="index" class="outer row space-between center">
			<view class="lef">{{ item.title }}</view>
			<view class="reg">{{ item.time }}时</view>
			<view class="cyc" @click="del(item.time)">
				<image class="yx" src="/static/pay/icon_27.png"></image>
				<view class="xxwz">X</view>
			</view>
		</view>

		<view @click="tjlog" class="bot row center"><view class="ziti">添加同房记录</view></view>

		<u-picker title="添加同房记录" @confirm="queren" mode="selector" v-model="tfshow" :default-selector="[8]" :range="selector"></u-picker>
	</view>
</template>

<script>
import api from '@/api/fetation.js';
export default {
	watch: {
		list: function(newData) {
			this.list = newData;
		}
	},
	onLoad(option) {
		this.nowtiem = option.nowtiem;
	},
	data() {
		return {
			list: '',
			tf_record: '',
			nowtiem: '',
			tfshow: false,
			selector: [
				'0时',
				'1时',
				'2时',
				'3时',
				'4时',
				'5时',
				'6时',
				'7时',
				'8时',
				'9时',
				'10时',
				'11时',
				'12时',
				'13时',
				'14时',
				'15时',
				'16时',
				'17时',
				'18时',
				'19时',
				'20时',
				'21时',
				'22时',
				'23时'
			]
		};
	},

	mounted() {
		// 获取当天时间
		// this.getime();
		console.log(this.list);
		this.getAalog();
	},

	methods: {
		tjlog() {
			this.tfshow = true;
		},
		//同房记录列表
		async getAalog() {
			var openid = uni.getStorageSync('openid');
			var arr = {
				openid: openid,
				time: this.nowtiem
			};
			const { data } = await api.getLogList(arr);

			var str = '';
			data.forEach(function(value, key) {
				str += value.time + ',';
			});
			if (str.length > 0) {
				str = str.substr(0, str.length - 1);
			}
			console.log(str);
			this.list = data;
			this.tf_record = str;
		},
		async del(item) {
			console.log(item);
			var num = this.tf_record.indexOf(item);
			var arr = this.tf_record.split(',');
			var letb = [];
			arr.forEach(function(value) {
				if (value != item) {
					letb.push(value);
				}
			});
			var str = letb.join(',');
			var openid = uni.getStorageSync('openid');
			var arr = {
				openid: openid,
				time: this.nowtiem,
				tf_record: str
			};
			const { code } = await api.submitRecord(arr);

			if (code == 1) {
				this.getAalog();
				uni.showToast({
					title: '删除成功',
					duration: 2000
				});
			} else {
				uni.showToast({
					title: '删除失败',
					duration: 2000
				});
			}
		},
		//增加同房记录
		async queren(e) {
			var _this = this;

			var openid = uni.getStorageSync('openid');

			if (_this.tf_record) {
				_this.tf_record = `${_this.tf_record},${e[0]}`;
			} else {
				_this.tf_record = e[0];
			}

			var arr = {
				openid: openid,
				time: _this.nowtiem,
				tf_record: _this.tf_record
			};

			const { code } = await api.submitRecord(arr);

			if (code == 1) {
				this.getAalog();
				uni.showToast({
					title: '增加成功',
					duration: 2000
				});
			} else {
				uni.showToast({
					title: '增加失败',
					duration: 2000
				});
			}
		},
		getime() {
			var date = new Date();
			var year = date.getFullYear(); //年
			var month = date.getMonth() + 1; //月
			var day = date.getDate(); //日
			this.nowtiem = year + '-' + month + '-' + day;
			// console.log(this.nowtiem)
			// },
		}
	}
};
</script>
<style lang="scss">
.app {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	align-items: center;
	// justify-content: center;
	background-color: #f8f8f8;
	// background-color: red;
	.cyc {
		position: relative;
	}
	.yx {
		position: absolute;
		right: 0rpx;
		top: -60rpx;
		width: 31rpx;
		height: 31rpx;
	}
	.xxwz {
		width: 15rpx;
		height: 16rpx;
		position: absolute;
		right: 10rpx;
		top: -62rpx;
		color: #ffffff;
		// color: #005CC5;
		border-radius: 2rpx;
	}
	.outer {
		width: 690rpx;
		height: 105rpx;
		margin-top: 30rpx;

		background: #ffffff;
		border-radius: 10rpx;

		.lef {
			padding-left: 30rpx;
			// width: 68px;
			height: 26rpx;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 26rpx;
			text-align: center;
		}

		.reg {
			padding-right: 30rpx;
			// width: 54px;
			height: 26rpx;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 26rpx;
			text-align: center;
		}
	}

	.bot {
		margin-top: 50rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #bb73d5, #643a92);
		box-shadow: 0px 4rpx 6rpx 0rpx rgba(100, 58, 146, 0.4);
		border-radius: 50rpx;

		.ziti {
			height: 32rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 32rpx;
		}
	}
}
</style>
